<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-04-08 10:23:21
 * @LastEditors: william
 * @LastEditTime: 2025-05-26 14:59:14
-->
<template>
  <div class="content-container">
    <div class="cc-left">
      <TextInput v-model="routeCategory" style="margin-top: 5px" clearable
        :placeholder="$t('travelAgency.routeCategory')" />
      <el-tree ref="refTree" style="max-width: 600px" :data="orgDeptData" :props="defaultProps" default-expand-all
        :expand-on-click-node="false" highlight-current :filter-node-method="filterNode" node-key="id"
        @node-click="handleNodeClick" />
    </div>
    <div class="cc-right">
      <el-row type="flex" justify="space-between" class="header-filter four-border-blueBg">
        <div class="row-left">
          <TextInput v-model="listParams.name" class="item" clearable :placeholder="$t('travelAgency.routeName')" />
          <el-select v-model="listParams.status" class="item" :placeholder="$t('public.status')" clearable>
            <el-option v-for="item in g_options.routeStatusOptions" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
          <DateTime v-model="listParams.createTime" class="item" style="min-width: 190px; max-width: 190px" clearable
            :default-time="new Date(2025, 1, 1, 0, 0, 0)" :placeholder="$t('public.createTime')" />
          <TextInput v-model="listParams.createUser" class="item" clearable
            :placeholder="$t('travelAgency.inputter')" />
          <el-button type="primary" @click="handleQuery">{{
            $t('public.search')
            }}</el-button>
          <el-button plain @click="handleReset">{{
            $t('public.reset')
            }}</el-button>
        </div>
        <div class="row-right">
          <el-button type="primary" @click="handleCreate">+ {{ $t('public.create') }}</el-button>
        </div>
      </el-row>
      <div class="base-table-container">
        <BaseTable ref="refContentTable" v-loading="loading" :data="tableData" row-key="id">
          <TableColumn prop="status" :label="$t('public.status')" :column-width="columnWidthObj.status">
            <template #default="{ row }">
              <span class="dot-status" :class="
                  g_options.getOptionText(
                    g_options.routeStatusOptions,
                    row.status,
                    '--',
                    'class'
                  )
                ">{{
                g_options.getOptionText(
                g_options.routeStatusOptions,
                row.status,
                '--'
                )
                }}</span>
            </template>
          </TableColumn>
          <TableColumn prop="routeTypeName" :label="$t('travelAgency.routeCategory')"
            :column-width="columnWidthObj.routeTypeName" />
          <TableColumn prop="productType" :label="$t('travelAgency.productType')"
            :column-width="columnWidthObj.productType">
            <template #default="{ row }">
              <span>{{
                g_options.getOptionText(
                g_options.productTypeOptions,
                row.productType,
                '--'
                )
                }}</span>
            </template>
          </TableColumn>
          <TableColumn prop="code" :label="$t('travelAgency.routeCode')" :column-width="columnWidthObj.code" />
          <TableColumn prop="name" :label="$t('travelAgency.routeName')" :column-width="columnWidthObj.name" />
          <TableColumn prop="days" :label="$t('travelAgency.days')" :column-width="columnWidthObj.days" />
          <TableColumn prop="eveningCount" :label="$t('travelAgency.accommodationNights')"
            :column-width="columnWidthObj.eveningCount" />
          <TableColumn prop="teamPeopleCount" :label="$t('travelAgency.groupFormingNumber')"
            :column-width="columnWidthObj.teamPeopleCount" />
          <TableColumn prop="createUser" :label="$t('travelAgency.inputter')"
            :column-width="columnWidthObj.createUser" />
          <TableColumn prop="createTime" :label="$t('public.createTime')" :column-width="columnWidthObj.createTime" />
          <TableColumn prop="action" fixed="right" :label="$t('public.action')" :column-width="columnWidthObj.action">
            <template #default="{ row }">
              <el-button text @click="handleAddTeam(row)">
                {{ $t('travelAgency.quickCreateTeam') }}
              </el-button>
              <el-button text @click="handleDetailDialog(row)">
                {{ $t('public.detail') }}
              </el-button>
              <el-button text @click="handleEditDialog(row)">
                {{ $t('public.edit') }}
              </el-button>
              <el-button text @click="handleDelete(row)">
                {{ $t('public.delete') }}
              </el-button>
              <el-button text @click="handleFileMange(row)">
                {{ $t('travelAgency.fileManage') }}
              </el-button>
              <el-button text @click="handleQuote(row)">
                报价
              </el-button>
            </template>
          </TableColumn>
        </BaseTable>
        <BasePagination v-model:page-size="pageSize" v-model:current-page="pageNum" :total="total"
          @change="getTableList()" />
      </div>
    </div>
    <!-- 新建 -->
    <AddOrEditDialog v-if="addOrEditVisible" v-model="addOrEditVisible" :id="rowId" :type="addOrEditType"
      :type-id="listParams.typeId" @update="handleQuery" />
    <!-- 详情 -->
    <DetailDialog v-if="detailVisible" v-model="detailVisible" :id="rowId" :type-id="listParams.typeId" />
    <!-- 文件管理 -->
    <FileMange v-if="fileMangeVisible" v-model="fileMangeVisible" :id="rowId" />
    <!-- 快速建团 -->
    <AddTeamDialog v-if="addTeamVisible" v-model="addTeamVisible" :routeId="rowId" />
  </div>
</template>

<script setup>
import AddOrEditDialog from './component/AddOrEditDialog.vue'
import DetailDialog from './component/DetailDialog.vue'
import FileMange from './component/FileMange.vue'
import AddTeamDialog from './component/AddTeamDialog.vue'

const routeCategory = ref('')
const refTree = ref(null)
const orgDeptData = ref([])
const defaultProps = {
  children: 'routeTypeList',
  label: 'name'
}
const listParams = ref({
  productType: '',
  typeId: '',
  name: '',
  status: '',
  createTime: '',
  createUser: ''
})
const refContentTable = ref(null)
const loading = ref(false)
const tableData = ref([])
const columnWidthObj = ref({})
const total = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
const addOrEditVisible = ref(false)
const addTeamVisible = ref(false)
const rowId = ref('')
const addOrEditType = ref('detail')
const detailVisible = ref(false)
const fileMangeVisible = ref(false)
const offerVisible = ref(false)

watch(routeCategory, nv => {
  refTree.value.filter(nv)
})

onMounted(() => {
  getTreeList()
})

// 查询下拉列表
// const getDropList = () => {
//   g_api.travelAgency.apiRoutetypeDropList().then(({ code, data }) => {
//     if (code === '200' && data) {
//       // options.value = data
//     }
//   })
// }

// 查询树列表
const getTreeList = () => {
  orgDeptData.value = []
  tableData.value = []
  g_api.travelAgency.apiRoutetypeGetTreeList().then(({ code, data }) => {
    if (code === '200' && data) {
      orgDeptData.value = data.map(item => {
        return {
          ...item,
          name: item.productTypeName,
          childDeptList: item.routeTypeList,
          id: item.id || item.productType + item.productTypeName
        }
      })
      listParams.value.productType = data[0]?.productType || ''
      refTree.value?.setCurrentKey(orgDeptData.value[0]?.id)
      getTableList()
    }
  })
}

const getTableList = () => {
  loading.value = true
  tableData.value = []
  g_api.travelAgency
    .apiRouteList({
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      ...listParams.value
    })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        tableData.value = data.items
        total.value = data.total
        useTableColumnWidth({
          refTable: refContentTable.value
        }).getTableColumnWidth(data => {
          columnWidthObj.value = data
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

const filterNode = (value, data) => {
  if (!value) return true
  // 防止父级节点为null的问题
  return (
    data.name?.includes(value) ||
    data.childDeptList?.find(item => item.name.includes(value))
  )
}

const handleNodeClick = ({ productType, id }, node) => {
  listParams.value.productType = productType || ''
  listParams.value.typeId = id || ''
  handleQuery()
}

const handleQuery = () => {
  pageNum.value = 1
  getTableList()
}

const handleReset = () => {
  Object.assign(listParams.value, {
    name: '',
    status: '',
    createTime: '',
    createUser: ''
  })
  handleQuery()
}

const handleCreate = () => {
  addOrEditVisible.value = true
  addOrEditType.value = 'add'
}

const handleDelete = row => {
  g_utils
    .deleteConfirm()
    .then(() => {
      loading.value = true
      g_api.travelAgency
        .apiRouteDelete({
          id: row.id
        })
        .then(res => {
          if (res.code === '200') {
            ElMessage.success(res.message)
            handleQuery()
          }
        })
        .finally(() => {
          loading.value = false
        })
    })
    .catch(() => { })
}

const handleDetailDialog = row => {
  detailVisible.value = true
  rowId.value = row.id
}

const handleEditDialog = row => {
  addOrEditVisible.value = true
  addOrEditType.value = 'edit'
  rowId.value = row.id
}

const handleAddTeam = (row) => {
  addTeamVisible.value = true
  rowId.value = row.id
}

const handleFileMange = row => {
  fileMangeVisible.value = true
  rowId.value = row.id
}

const handleQuote = row => {
  g_router.push({
    path: '/travelAgency/quote',
    query: { routeId: row.id }
  })
}
</script>

<style lang="scss" scoped>
.content-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row;

  .cc-left {
    max-width: 250px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--menu-theme-bg);
    overflow: auto;
    box-sizing: border-box;
    @extend .custom-scrollbar; // 继承滚动条样式

    :deep(.el-tree-node__label) {
      @extend .oneEllipsis;
    }

    :deep(.el-tree) {
      background-color: var(--menu-theme-bg);
    }
  }

  .cc-right {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    overflow: auto;
  }
}
</style>
